<template>
<el-container class="home-container">
  <el-header>
      <div>
          <img  src="../assets/cy_logo@2x.png" alt="">
          <span>后台管理系统</span>
      </div>
      <el-button type="info" disabled>111退出</el-button>
  </el-header>
  <el-container>
    <el-aside width="200px">
        <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-submenu :index="item.id +'' " v-for="item in menuList" :key="item.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span> {{item.authName}} </span>
        </template>
     
          <el-menu-item :index="subitem.id + '' " v-for="subitem in item.children" :key="subitem.id">
            <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{subitem.authName}}</span>
            </template>
          </el-menu-item>
      </el-submenu>


    </el-menu>
    </el-aside>
    <el-main >Main</el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data(){
        return{
            menuList:[{id:125,authName:'用户管理',children:[{id:104,authName:'用户管理',path:'user'}]},
            {id:103,authName:'菜单管理',children:[{id:101,authName:'外卖点心管理',path:'menus1'},{id:102,authName:'每日点心管理',path:'menus2'}]},
            {id:124,authName:'订单管理',children:[{id:105,authName:'订单管理',path:'orders'}]}],
            iconObj:{
                '125':'el-icon-user-solid',
                '103':'',
                '124':''
            }
        }
    },
    created(){
        console.log(this.menuList);
    }
}
</script>

<style scoped>
.home-container{
    height: 100%;
}
.el-header{
    background-color: grey;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: aliceblue;
    font-size: 20px;
}
.el-header div{
    display: flex;
    align-items: center;
}
.el-header img{
    width: 200px;
    margin-right: 15px;
}
.el-aside{
    background-color: #545c64;
}
.el-main{
    
}
</style>